<template>
	<view class="placeorder">
		<uni-nav-bar left-icon="arrowleft" title="代理下单" @clickLeft="back" @clickRight="showdrawer = !showdrawer" :fixed="true" status-bar class="top">
			<!-- <image src="/static/img/screen1.png" class="screen" slot="right"></image> -->
		</uni-nav-bar>
		<view class="top1">
			<view class="title">货号：</view>
			<input value="" placeholder="请输入货号" class="input" v-model="num" @input="filter" />
			<view class="button" @click="getlist">
				<uni-icons type="search" size="20" color="#fff" class="icons" />
				搜 索
			</view>
		</view>
		<view class="separate">
			<view class="wire"></view>
			<text>搜索商品信息</text>
		</view>
		<view class="list">
			<view class="li" @tap="gotodetail(item.id)" v-for="(item, index) in orderlist" :key="index">
				<view class="shop">
					<image :src="item.image" mode="aspectFill"></image>
					<view class="msg">
						<view class="name black">{{ item.goodsName }}</view>
						<text>¥{{ item.marketPrice }}</text>
						<!-- <view v-for="(item1,index1) in item.sku" :key="index1">
							<view class="sizr gray ">{{item1}}</view>
						</view> -->
					</view>
				</view>
				<!-- <view class="genre">
					共1件
					<view class="price">
						合计：
						<text>¥{{item.marketPrice}}</text>
					</view>
				</view> -->
			</view>
			<view class="">
				
			</view>
		</view>

		<uni-drawer :visible="showdrawer" mode="right">
			<view class="uni-title">筛选搜索</view>
			<view class="classify">
				<view class="title" @tap="iscategoryshow = !iscategoryshow">
					<text>分类</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iscategoryshow">
					<view class="li" :class="{ on: categorycur == index }" v-for="(item, index) in list.category" :key="index" @tap="changecategory(item, index)">
						{{ item.catName }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="issceneshow = !issceneshow">
					<text>场景</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issceneshow">
					<view class="li" :class="{ on: scenecur == index }" v-for="(item, index) in list.scene" :key="index" @tap="changescene(item, index)">
						{{ item.sceneName }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify price">
				<view class="title" @tap="ispriceshow = !ispriceshow">
					<text>价格</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul flex" v-if="ispriceshow">
					<input type="number" value="" class="li" placeholder="最低价" v-model="minPrice" />
					<text class="xian"></text>
					<input type="text" value="" class="li" placeholder="最高价" v-model="maxPrice" @input="hight" />
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="iscolershow = !iscolershow">
					<text>颜色</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iscolershow">
					<view class="li" :class="{ on: colercur == index }" v-for="(item, index) in list.coler" :key="index" @tap="changcoler(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="issizeshow = !issizeshow">
					<text>尺码</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issizeshow">
					<view class="li" :class="{ on: sizecur == index }" v-for="(item, index) in list.size" :key="index" @tap="changesize(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="isshoulderwidthshow = !isshoulderwidthshow">
					<text>衣宽</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="isshoulderwidthshow">
					<view class="li" :class="{ on: shoulderwidthcur == index }" v-for="(item, index) in list.shoulderwidth" :key="index" @tap="changeshoulderwidth(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="isbustshow = !isbustshow">
					<text>胸围</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="isbustshow">
					<view class="li" :class="{ on: bustcur == index }" v-for="(item, index) in list.bust" :key="index" @tap="changebust(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="iswaistshow = !iswaistshow">
					<text>腰围</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="iswaistshow">
					<view class="li" :class="{ on: waistcur == index }" v-for="(item, index) in list.waist" :key="index" @tap="changewaist(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
			<view class="classify">
				<view class="title" @tap="issleeveLengshow = !issleeveLengshow">
					<text>袖长</text>
					<uni-icons type="arrowdown" size="20" color="#999" class="right" />
				</view>
				<view class="ul" v-if="issleeveLengshow">
					<view class="li" :class="{ on: sleeveLengcur == index }" v-for="(item, index) in list.sleeveLeng" :key="index" @tap="changesleeveLeng(item, index)">
						{{ item.dictValueDesp }}
						<uni-icons type="checkbox-filled" size="16" color="#bd3c8c" class="check"></uni-icons>
					</view>
				</view>
			</view>
		</uni-drawer>
	</view>
</template>

<script>
import { uniIcons, uniDrawer, uniNavBar } from '@dcloudio/uni-ui';
import placeorder from '../../../servers/agent/placeorder/placeorder.js';
export default {
	components: {
		uniIcons,
		uniDrawer,
		uniNavBar
	},
	data() {
		return {
			showdrawer: false,
			num: '',
			list: '',
			iscategoryshow: false,
			issceneshow: false,
			ispriceshow: false,
			iscolershow: false,
			issizeshow: false,
			isshoulderwidthshow: false,
			isbustshow: false,
			iswaistshow: false,
			issleeveLengshow: false,
			categorycur: null,
			scenecur: null,
			colercur: null,
			sizecur: null,
			shoulderwidthcur: null,
			bustcur: null,
			waistcur: null,
			sleeveLengcur: null,
			categoryid: '',
			sceneid: '',
			maxPrice: '',
			minPrice: '',
			color: '',
			size: '',
			shoulderwidth: '',
			bust: '',
			waist: '',
			sleeveLeng: '',
			orderlist: '',
			arr: []
		};
	},
	onLoad() {},
	mounted() {
		// this.drawer();
	},
	methods: {
		// 最高价
		hight(event) {
			this.maxPrice = event.detail.value;
			if (this.maxPrice - this.minPrice < 0) {
				console.log(this.maxPrice - this.minPrice, this.maxPrice, this.minPrice);
				uni.showToast({
					title: '不能小于最低价格哦~',
					icon: 'none'
				});
				this.maxPrice = '';
			}
		},
		// 查看详情
		gotodetail(id) {
			this.commonality.route_baling('/pages/shop/commodity/particulars','shopId', id);
			// this.commonality.route_baling('/pages/shop/commodity/particulars', 'shopId', e);
		},
		// 抽屉列表
		// drawer() {
		// 	uni.showLoading({
		// 		title: '数据加载中'
		// 	});
		// 	placeorder
		// 		.queryCriteria()
		// 		.then(res => {
		// 			// console.log(res.data)
		// 			if (res.code == 200) {
		// 				this.list = res.data;
		// 			} else {
		// 				uni.showToast({
		// 					title: res.msg,
		// 					icon: 'none'
		// 				});
		// 			}
		// 			uni.hideLoading();
		// 		})
		// 		.catch(err => {
		// 			console.log(err);
		// 			console.log(new Error('请检查网络后重试'));
		// 		});
		// },
		changecategory(item, index) {
			this.categorycur = index;
			this.categoryid = item.id;
			this.getlist();
			// console.log(this.$refs[`list.category${index}`][0].$el,item.id)
		},
		changescene(item, index) {
			this.scenecur = index;
			this.sceneid = item.id;
			this.getlist();
		},
		changcoler(item, index) {
			this.colercur = index;
			this.color = item.dictValueDesp;

			this.getlist();
		},
		changesize(item, index) {
			this.sizecur = index;
			this.size = item.dictValueDesp;
			this.getlist();
		},
		changeshoulderwidth(item, index) {
			this.shoulderwidthcur = index;
			this.shoulderwidth = item.dictValueDesp;

			console.log(item, item.shoulderwidth);
			this.getlist();
		},
		changebust(item, index) {
			this.bustcur = index;
			this.bust = item.dictValueDesp;

			this.getlist();
		},
		changewaist(item, index) {
			this.waistcur = index;
			this.waist = item.dictValueDesp;
			this.getlist();
		},
		changesleeveLeng(item, index) {
			this.sleeveLengcur = index;
			this.sleeveLeng = item.dictValueDesp;
			this.getlist();
		},
		// 下单列表
		getlist() {
			uni.showLoading({
				title: '数据加载中'
			});
			var productSkuDesp = '',
				paramValue = `${this.shoulderwidth},${this.bust},${this.waist},${this.sleeveLeng}`;
			if (this.color && this.size) {
				productSkuDesp = `颜色:${this.color}尺码:${this.size}`;
			}
			if (this.color && !this.size) {
				productSkuDesp = `颜色:${this.color}`;
			}
			if (!this.color && this.size) {
				productSkuDesp = `尺码:${this.size}`;
			}
			if (!this.color && !this.size) {
				productSkuDesp = '';
			}
			if (this.shoulderwidth == '' && this.bust == '' && this.waist == '' && this.sleeveLeng == '') {
				paramValue = '';
			}
			if (paramValue.indexOf(this.shoulderwidth) !== 1) {
				paramValue.replace(this.shoulderwidth, '');
			}
			if (paramValue.indexOf(this.bust) !== 1) {
				paramValue.replace(this.bust, '');
			}
			if (paramValue.indexOf(this.waist) !== 1) {
				paramValue.replace(this.waist, '');
			}
			if (paramValue.indexOf(this.sleeveLeng) !== 1) {
				paramValue.replace(this.sleeveLeng, '');
			}
			paramValue = paramValue.replace(/^,+|,+$/g, '');
			if (paramValue.indexOf(',,') !== -1 || paramValue.indexOf(',,,') !== -1) {
				paramValue = paramValue.replace(/,,/g, ',');
				paramValue = paramValue.replace(/,,,/g, ',');
			}
			var params = {
				agentSn: null,
				currentPage: 1,
				pageSize: 10,
				catId: this.categoryid,
				maxPrice: this.maxPrice,
				minPrice: this.minPrice,
				productSkuDesp: productSkuDesp,
				productSn: this.num,
				sceneId: this.sceneid,
				paramValue: paramValue
			};

			placeorder
				.goodsSn(this.num)
				.then(res => {
					console.log(res.data);
					if (res.code == 200) {
						if (res.data.records.length > 0) {
							this.orderlist = res.data.records.map(v => {
								v.image = this.imgCDNUrl + v.goodsImg;
								// var sku = [];
								// if (v.productSkuDesp) {
								// 	sku = v.productSkuDesp.split(",");
								// }
								// v.sku = sku;
								return v;
							});
						} else {
							uni.showToast({
								title: '没有您要找的信息',
								icon: 'none'
							});
						}
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none'
						});
					}
					uni.hideLoading();

					// this.str=this.orderlist.productSkuDesp.split(',')
				})
				.catch(err => {
					console.log(new Error('请检查网络后重试'));
				});
		},
		// 返回上一级页面
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		// 货号过滤
		filter(e) {
			e.detail.value = e.detail.value.replace(/[^\w\.\/]/gi, '');
			setTimeout(() => {
				this.num = e.detail.value;
			}, 0);
		}
	}
};
</script>

<style lang="less" scoped>
.screen {
	width: 37rpx;
	height: 28rpx;
}
.flex {
	display: flex;
	align-items: center;
}
.top1 {
	background: #ffffff;
	padding: 46rpx 20rpx;
	display: flex;
	flex-direction: row;
	line-height: 84rpx;

	.title {
		font-size: 30rpx;
	}

	.input {
		width: 430rpx;
		border-radius: 10rpx;
		box-shadow: 5rpx 0px 20rpx #c5c5c5;
		margin: 0 27rpx 0 18rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		height: 84rpx;
	}

	.button {
		height: 84rpx;
		line-height: 84rpx;
		padding: 0rpx 20rpx;
		text-align: center;
		color: #ffffff;
		border-radius: 10rpx;
		font-size: 28rpx;
		background: #bd3c8c;
	}
}

.separate {
	position: relative;
	text-align: center;
	font-size: 30rpx;
	color: #999999;
	padding: 29rpx 0;

	.wire {
		position: absolute;
		width: 608rpx;
		border-bottom: 1px solid #999999;
		top: 50rpx;
		left: 77rpx;
		z-index: -1;
	}

	text {
		padding: 0 29rpx;
		background: #fff;
	}
}

.list {
	padding: 0 20rpx;
	background: #ffffff;

	.li {
		padding: 50rpx 0;
		border-bottom: 1px solid #e1e1e1;

		.shop {
			position: relative;
			display: flex;
			flex-direction: row;

			image {
				width: 230rpx;
				height: 230rpx;
				border-radius: 10rpx;
			}

			.msg {
				width: 431rpx;
				margin-left: 37rpx;
				line-height: 46rpx;

				.name {
					font-size: 28rpx;
					height: 100rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.type {
					font-size: 26rpx;
				}

				.gray {
					color: #999999;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}
		}

		.genre {
			padding-top: 54rpx;
			text-align: right;
			color: #999999;
			font-size: 26rpx;

			.price {
				display: inline-block;
				color: #333333;
				margin-left: 29rpx;

				text {
					font-size: 30rpx;
					color: #333333;
				}
			}
		}
	}

	.li:nth-last-child(1) {
		border-bottom: none;
	}
}

.uni-title {
	font-size: 30rpx;
	padding: 20rpx 0;
}

.classify {
	border-bottom: 1px solid #e1e1e1;

	.title {
		font-size: 28rpx;
		line-height: 110rpx;
		color: #999999;
	}

	.ul {
		overflow: hidden;
		padding: 0 4rpx;

		.li {
			float: left;
			width: 160rpx;
			height: 72rpx;
			line-height: 72rpx;
			margin-right: 26rpx;
			margin-bottom: 33rpx;
			border-radius: 10rpx;
			font-size: 26rpx;
			background: #f4f4f4;
			color: #999;
			text-align: center;
			position: relative;
			.check {
				display: none;
			}
			&.on {
				background-color: #fbeef6;
				color: #bd3c8c;
				.check {
					display: block;
					position: absolute;
					bottom: -12rpx;
					right: 8rpx;
				}
			}
		}

		.li:nth-child(3n) {
			margin-right: 0;
		}

		.li {
			display: block;
		}
	}
}

.price {
	.xian {
		width: 53rpx;
		margin: 0 12rpx 30rpx;
		border-bottom: 1px solid #e1e1e1;
	}

	.ul {
		.li {
			width: 230rpx;
			margin-right: 0;
			color: #000000;
		}
	}
}
</style>
